<template>
  <div class="Safeguard">
    <el-row>
      <el-col :span="24">
        <div class="grid-content bg-purple-dark">
          <div class="tltle_box">
            <el-row :gutter="24" style="width: 100%;">
            <el-col :sm="24" :md="16" :lg="16">
            <div class="tltle_box_l">
                 <el-row :gutter="24" style="width: 100%;">
            <el-col :sm="24" :md="10" :lg="12" style="padding:10px 0 10px 20px">
              <div class="Material_r">
                <el-input
                  placeholder="请输入节目名关键字"
                  v-model="searchValue"
                  clearable
                  @clear="clearSearchValue"
                ></el-input>
                <el-button type="primary" icon="el-icon-search" @click="searchName">搜索</el-button>
              </div>
            </el-col>
            <el-col :sm="24" :md="14" :lg="12">
              <div style="padding:10px 20px 0 20px;margin:0 8px;">
                <el-button @click="matterSearch" v-if="Invoking.forFunctionCode('material:selectPage_2')">按素材名搜索</el-button>
                <el-tag
                  v-if="matterSearchName"
                  :key="materialId"
                  closable
                  :disable-transitions="false"
                  @close="materialTagClose(this)"
                  style="height: 40px;line-height: 40px;"
                >已选素材：{{matterSearchName}}</el-tag>
              </div>
            </el-col>
            </el-row>
            </div>
            </el-col>
            <el-col :sm="24" :md="8" :lg="8">
            <div class="tltle_box_r">
              <!-- <el-tooltip class="item" effect="dark" content="导出ZIP" placement="top"> -->
                <el-button @click="deriveZip" v-if="Invoking.forFunctionCode('export:getExportInfo')">
                  <img src="../../assets/images/wei2_03.png" alt />
                  <div>导出ZIP</div>
                </el-button>
              <!-- </el-tooltip> -->
            </div>
            </el-col>
            </el-row>
          </div>
        </div>
      </el-col>
    </el-row>
    <el-row>
      <el-col :span="24">
        <div class="grid-content bg-purple-dark" style="background-color: #fff;border-radius: 5px;">
          <div class="MaterialTable">
              <zycm-table
              @zyLoadData="loadData"
              zy-table-ref="media_group_safeguard_table"
              :zy-table-data="tabledataList"
              zy-table-height="62vh"
              zy-table-select-type="checkbox"
              @zyTableSelect="tableSelect"
              zy-row-key="programId"
          >
              <el-table-column type="expand">
                <template slot-scope="props">
                  <el-form label-position="left" inline class="demo-table-expand fold">
                        <el-form-item label="节目名称:">
                          <span v-if="props.row.programName">{{props.row.programName}}</span>
                          <span v-else>无</span>
                        </el-form-item>
                        <el-form-item label="区域数:">
                          <span v-if="props.row.areaNum">{{props.row.areaNum}}</span>
                          <span v-else>无</span>
                        </el-form-item>
                        <el-form-item label="素材数:">
                          <span v-if="props.row.fileNum">{{props.row.fileNum}}</span>
                          <span v-else>无</span>
                        </el-form-item>
                  </el-form>
                </template>
              </el-table-column>
              <el-table-column prop="programName" label="节目名称" min-width="180" show-overflow-tooltip></el-table-column>
              <el-table-column prop="totalSize" label="大小" width="80" show-overflow-tooltip></el-table-column>
              <el-table-column prop="programHeight" label="节目宽高" width="120" show-overflow-tooltip>
                <template slot-scope="props">
                  <div
                    v-if="props.row.programWidth >= props.row.programHeight"
                  >{{props.row.programWidth+'*'+props.row.programHeight}}(横屏)</div>
                  <div v-else>{{props.row.programWidth+'*'+props.row.programHeight}}(竖屏)</div>
                </template>
              </el-table-column>
              <el-table-column prop="totalPlayTime" label="时长(秒)" width="80"></el-table-column>
              <el-table-column prop="createTime" label="创建时间" show-overflow-tooltip>
                <template slot-scope="props">
                  <div>{{props.row.createTime | dateFormat}}</div>
                </template>
              </el-table-column>
              <el-table-column prop="creator" label="创建人" show-overflow-tooltip></el-table-column>
              <el-table-column prop="publishNum" label="发布状态" width="80">
                <template slot-scope="props">
                  <el-tag v-if="props.row.publishNum==0" :size="GlobalVar.sizeSet.tag">未发布</el-tag>
                  <el-tag type="success" v-else-if="props.row.auditStatus==1" :size="GlobalVar.sizeSet.tag">已发布</el-tag>
                </template>
              </el-table-column>
              <el-table-column prop="auditStatus" label="审核状态" width="100">
                <template slot-scope="props">
                  <el-tag v-if="props.row.auditStatus==0" :size="GlobalVar.sizeSet.tag">未审核</el-tag>
                  <el-tag type="success" v-else-if="props.row.auditStatus==1" :size="GlobalVar.sizeSet.tag">审核通过</el-tag>
                  <el-tag type="danger" v-else :size="GlobalVar.sizeSet.tag">审核未通过</el-tag>
                </template>
              </el-table-column>
              <el-table-column label="操作" fixed="right"  width="100" class-name="stopRowClick">
                <template slot-scope="scope" v-if="Invoking.ifFunctionCode('material:selectPage_2#program:eleteProgram')">
                  <el-dropdown :size="GlobalVar.sizeSet.dropdown">
                    <el-button type="primary" :size="GlobalVar.sizeSet.btn">
                      更多
                      <i class="el-icon-arrow-down el-icon--right"></i>
                    </el-button>
                    <el-dropdown-menu slot="dropdown">
                      <el-dropdown-item @click.native="ClickInformation(scope.row)" v-if="Invoking.forFunctionCode('material:selectPage_2')">节目信息</el-dropdown-item>
                      <el-dropdown-item @click.native="removeTableList(scope.row)" v-if="Invoking.forFunctionCode('program:deleteProgram')">删除节目</el-dropdown-item>
                    </el-dropdown-menu>
                  </el-dropdown>
                </template>
              </el-table-column>
              </zycm-table>

          </div>
        </div>
      </el-col>
    </el-row>
    <!-- 素材名搜索 -->
    <search v-bind:matterSearchData="matterSearchData" @returnList="returnList"></search>
    <ProgramInformation
      v-bind:Information="Information"
      v-bind:transferId="transferId"
      @refurbish="refurbish"
      ref="ref_programInfo"
    ></ProgramInformation>
  </div>
</template>

<script>
import search from "../../components/ProgramData/Popout/search.vue";
import ProgramInformation from "../../components/ProgramData/Popout/ProgramInformation.vue";
export default {
  name: "Safeguard",
  components: {
    search,
    ProgramInformation,
  },
  props: {},
  data() {
    return {
      materialId: "",
      query: {
        page: 1,
        pageSize: this.GlobalVar.query.pageSize,
        total: 0,
      },
      matterSearchData: false,
      matterSearchName: "",
      Information: false,
      tableData: [],
      searchValue: "",
      value: "",
      // 勾选的数据
      selectionList: [],
      // 删除的数据
      removerList: [],
      // 详细信息
      transferId: {},
      uuid: "",
      thisFormData: new FormData(),
      tabledataList: [], //保存当页的所有table数据
      tablePageList: [], //保存对应table的page数据
    };
  },
  created() {
    this.getListData();
  },

  methods: {
    async loadData(formData, tableRef) {
      //提前修正isReqData状态 后续赋值随时会触发table组件的computed  后面还要进行一次修正
      for (let key in this.tabledataList) {
        if (this.tabledataList[key].ref === tableRef) {
          this.tabledataList[key].isReqData = true; //标记更新数据的状态 组件中会根据此判断是否重新更新数据
        } else {
          this.tabledataList[key].isReqData = false;
        }
      }

      //子组件触发查询时  处理查询的参数
      if (this.tablePageList[tableRef]) {
        this.tablePageList[tableRef].set("page", formData.get("page"));
        this.tablePageList[tableRef].set("pageSize", formData.get("pageSize"));
      }

      let res;
      if (tableRef == "media_group_safeguard_table") {
        //发布-选择节目列表
        res = await this.$http.post(
          "program/selectPage",
          this.tablePageList[tableRef]
        );
        this.selectionList = []
      }

      if (res && res.data.result === "success") {
        //记录更新分页数据
        res.data.ref = tableRef;
        //更新记录
        let sign = 0;
        for (let key in this.tabledataList) {
          if (this.tabledataList[key].ref === tableRef) {
            if (sign > 1) {
              //去掉重复数据
              this.tabledataList.splice(key, 1);
            } else {
              this.tabledataList.splice(key, 1, res.data);
              this.tabledataList[key].isReqData = true; //标记更新数据的状态 组件中会根据此判断是否重新更新数据
            }
            sign++;
          } else {
            this.tabledataList[key].isReqData = false;
          }
        }
        if (sign == 0) {
          //没有初始化时
          res.data.isReqData = true;
          this.tabledataList.push(res.data);
        }
      } else {
        if (res && res.data.result === "error") {
          this.$message({
            type: "error",
            message: res.data.message,
          });
        } else {
          this.$message({
            type: "error",
            message: "请求数据出现异常",
          });
        }
      }
    },
    //当页刷新数据
    currentTableLoad(tableRef, firstPage, fd) {
      if (firstPage) {
        //加载第一页数据
        if (!this.tablePageList[tableRef]) {
          this.tablePageList[tableRef] = new FormData();
          this.tablePageList[tableRef].set("pageSize", this.GlobalVar.query.pageSize);
        }
        this.tablePageList[tableRef].set("page", 1);
      }
      //如果有其他查询参数 合并处理
      if (fd) {
        for (let item of fd.entries()) {
          this.tablePageList[tableRef].set(item[0], item[1]);
        }
      }
      this.loadData(this.tablePageList[tableRef], tableRef);
    },
    tableSelect(selection,row,tableRef){
      if(tableRef === "media_group_safeguard_table"){//发布-选择节目
        this.selectionList = selection;
      }
    },
    deriveZip() {
      if (this.selectionList.length == 0) {
        this.$message({
          type: "warning",
          message: "请选择需要导出的节目",
        });
        return;
      }
      let array = [];
      var timestamp = Date.parse(new Date());
      let uid = window.sessionStorage.getItem("uid");

      this.uuid = timestamp + "_" + uid;
      this.selectionList.forEach((ele) => {
        array.push(ele.programId);
      });

      this.$confirm(
        "是否确定选择的" + array.length + "个节目合并导出成一个节目包?",
        "提示",
        {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        }
      )
        .then(() => {
          this.downloadData(array);
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
    async downloadData(e) {
      let formData = new FormData();
      let token = window.sessionStorage.getItem("token");
      formData.append("zycmToken", token);
      formData.append("programIds", e[0]);
      formData.append("uuid", this.uuid);
      const { data: res } = await this.$http.post(
        "export/exportZIPByProgramIds",formData);
      if (res.result !== "error") {
        window.location.href =
          this.$http.defaults.baseURL +
          "export/exportZIPByProgramIds?zycmToken=" +
          token +
          "&programIds=" +
          e +
          "&uuid=" +
          this.uuid;
      } else {
        this.$message({
          type: "warning",
          message: res.message,
        });
      }
    },

    returnList(e) {
      this.matterSearchName = e.materialName;
      this.materialId = e.materialId;
      // this.query.page = 1;
      this.getListData();
    },
    // 是否更新
    refurbish(e) {
      this.getListData();
      this.selectionList = [];
      // this.transferId = [];
    },
    // 删除节目
    removeTableList(e) {
      this.$confirm(
        "此操作将永久删除该节目[" +
          e.programName +
          "]并且如果是已发布的节目自动下刊, 是否继续?",
        "提示",
        {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        }
      )
        .then(() => {
          this.removeFunction(e);
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
    async removeFunction(e) {
      let token = window.sessionStorage.getItem("token");
      let formData = new FormData();
      formData.append("zycmToken", token);
      formData.append("programId", e.programId);
      const { data: res } = await this.$http.post(
        "program/deleteProgram",
        formData
      );
      if (res.result == "success") {
        this.$message({
          type: "success",
          message: res.message,
        });
      } else {
        this.$message({
          type: "error",
          message: res.message,
        });
      }
      this.removerList = [];
      this.query.page = 1;
      this.query.pageSize = this.GlobalVar.query.pageSize;
      this.getListData();
    },
    // 获取勾选数据
    selectTable(selection, row) {
      this.selectionList = selection;
    },
    // 获取表格信息
    async getListData() {
      this.selectionList = []; //每次加载数据清空已选数据

      let token = window.sessionStorage.getItem("token");
      let formData = new FormData();
      formData.set("zycmToken", token);
      formData.set("materialId", this.materialId);
       formData.set("programName", this.searchValue);
       this.currentTableLoad("media_group_safeguard_table",true,formData)

    },
    // 点击搜索
    searchName() {
      this.getListData();
    },
    // 关闭搜索
    clearSearchValue() {
      this.query.page = 1;
      // this.searchValue = "";
      this.thisFormData.delete("programName");
      this.getListData();
    },
    indexMethod(index) {
      return (this.query.page - 1) * this.query.pageSize + index + 1;
    },
    handleSizeChange(val) {
      this.query.pageSize = val;
      this.getListData();
    },
    handleCurrentChange(val) {
      this.query.page = val;
      this.getListData();
    },
    matterSearch() {
      if (!this.matterSearchData) {
        this.matterSearchData = true;
      } else {
        this.matterSearchData = false;
      }
    },
    // 点击打开节目信息
    ClickInformation(e) {
      this.transferId = e;
      if (!this.Information) {
        this.Information = true;
      } else {
        this.Information = false;
      }
      this.$refs.ref_programInfo.loadData1(e);
      // this.transferId=[]
    },
    materialTagClose(obj) {
      this.matterSearchName = "";
      this.materialId = "";
      this.query.page = 1;
      this.getListData();
    },
    rowExpansion(row, column, cell, event) {
      //过滤掉与行点击事件冲突的列
      if (cell.className.search("stopRowClick") >= 0) return;
      this.$refs.zdxxTab.toggleRowExpansion(row);
    },
  },
};
</script>



<style lang="stylus" scoped>
.MaterialTable {
  padding: 20px 0 10px;
  /deep/.el-table {
    padding: 0 20px;
    margin-top: 0;
  }
  /deep/.el-table th,
  .el-table tr {
    background-color: #fafafa;
  }
  .pagination {
    display: flex;
    height: 60px;
    justify-content: center;
  }
  /deep/.el-pager li,
  /deep/.el-pagination .btn-next,
  /deep/ .el-pagination .btn-prev {
    border: 1px solid #eee;
    border-radius: 5px;
    margin: 0 5px;
    color: #333;
    padding: 0;
  }
}

.Safeguard {
  width: 100%;
  padding: 1.5% 0;
  overflow: hidden;
  .tltle_box {
    background-color: #fff;
    display: flex;
    justify-content: space-between;
 padding: 1.5% 0;
    width: 100%;
    align-items: center;
    margin-bottom: 15px;
    border-radius: 5px;
    .tltle_box_l {
      display: flex;
      .l_select {
        width: 150px;
        /deep/.el-select {
          width: 70%;
          padding: 0 20px;
        }
      }
      .Material_r {
        padding-left: 20px;
        display: flex;
        /deep/.el-button {
          margin: 0 0 0 20px;
          height: 40px;
          background-color: #2183d8;
        }
      }
    }
    .tltle_box_r {
      padding-right: 20px;
      .el-button {
        float: right;
        // background-color: #f2faff;
        // width: 50px;
        // height: 50px;
        // border: none;

        background-color: #f2faff;
        // width: 50px;
        height: 50px;
        border: none;
        margin-left: 0;
        margin: 0 5px;
        padding: 0 5px;
        font-size: 5px;
        border-radius: 5px;
        // color:#409EFF;
        img {
          width: 26px;
          height: 26px;
        }
      }
      /deep/.el-button:hover {
        background-color: #f2f2f2;
      }
    }
  }
}
/deep/.el-button {
  margin-left: 0;
  margin: 0 5px;
}
/deep/.el-select-dropdown .el-popper {
  min-width: 10px !important;
}
/deep/.el-select-dropdown__item.hover,
.el-select-dropdown__item:hover {
  color: #ff6633;
  background-color: #f2faff;
}
.MaterialTable {
  /deep/.has-gutter .el-checkbox {
    display: none;
  }
}

/deep/.el-pager li.active {
  background-color: #2183d8;
  color: #fff;
}

.demo-table-expand {
  span {
    padding: 0 10px;
  }
}
.el-dialog .el-dialog /deep/.demo-table-expand /deep/.el-form-item__label {
  color: #2183d8;
}
.fold {
  display: flex;
  flex-wrap: wrap;
  width: 100%;
}
.fold /deep/.el-form-item__label {
  color: #0095fb;
}
.fold /deep/.el-form-item {
  min-width: 20%;
  background-color: #fff;
  border: none;
  /deep/.el-form-item__content {
    max-width: 100%;
  }
}
</style>
